<template>
  <ElTableColumn
    :label="$props.label"
    :prop="$props.prop"
    :type="$props.type"
    :width="$props.width"
    v-slot="scope"
  >
    <!-- <div>$props.type:{{ $props.type }}</div>
    <div>scope.$index:{{ scope.$index }}</div>
    <div>scope.data:{{ scope.data }}</div> -->

    <!-- v-slot="{ row, $index, data }" -->
    <!-- operation=true 操作栏 -->
    <span v-if="$props.operation">
      <!-- {{ $props.operation }}：{{ buttons($index) }} -->
      <!-- {{ buttons(scope.$index) }} -->
      <template v-for="btn in buttons(scope.$index)" :key="btn.label">
        <!-- {{ btn }}, -->
        <ElButton
          v-if="btn.visiable"
          v-bind="btn"
          @click="
            handleOpeartion(btn.event, {
              row: scope.row,
              data: scope.data,
              index: scope.$index,
            })
          "
        >
          {{ btn.label }}
        </ElButton>
      </template>
    </span>

    <slot
      v-if="
        showSlotInput(scope.$index) ||
        showSlotButtons(scope.$index) ||
        showSlotExpand()
      "
      :row="scope.row"
      :index="scope.$index"
      :data="scope.data"
      :state="state(scope.$index)"
    >
    </slot>
    <!-- 文本 -->
    <span v-if="showRecordText">{{ scope.row[$props.prop] }}</span>

    <!-- expand -->
    <!-- //TODO  v-slot="scope" 中 scope.data不存在，只有scope.store-->

    <!-- <EasyTableColumnExpand
      :type="$props.type"
      :data="scope.data"
      :row="scope.row"
      :index="scope.$index"
      v-if="showExpandSubmit(scope.$index)"
    ></EasyTableColumnExpand> -->
    <div
      :class="[bem.e('submit')]"
      v-if="showExpandSubmit(scope.$index)"
    >
      <el-button
        size="small"
        type="primary"
        @click="
          handleExpandSubmit({
            row: scope.row,
            data: scope.data,
            index: scope.$index,
          })
        "
        >确定
      </el-button>
      <el-button
        size="small"
        type="info"
        @click="
          handleExpandCancel({
            data: scope.data,
            row: scope.row,
            index: scope.$index,
          })
        "
        >取消
      </el-button>
    </div>
  </ElTableColumn>
</template>

<script setup lang="ts">
import { ref, inject, useSlots } from 'vue';
import { createNamespace } from '@/components/extra-table/src/libs/bem';

import {
  props,
  type OperationButton,
  type ButtonType,
} from './easy-table-column';
import { easyTableContextKey, type EventData } from './easy-table';

import { ElTableColumn, ElButton } from 'element-plus';
import EasyTableColumnExpand from './easy-table-column-expand.vue';

defineOptions({ name: 'easy-table-column' });
const bem = createNamespace('easy-table-column');

const $props = defineProps(props);

const hasDefaultSlot = !!useSlots().default;
const easyTableContext = inject(easyTableContextKey);

const states = easyTableContext?.states || ref([]);
const state = (index: number) => states.value[index];

const showRecordText = hasDefaultSlot === false;

// operation =false expand=false state=edit
const showSlotInput = (index: number) =>
  state(index) === 'edit' &&
  $props.operation === false &&
  $props.type === undefined;

const showSlotButtons = (index: number) =>
  state(index) === 'view' && $props.operation;

const showSlotExpand = () => $props.type === 'expand';
const showExpandSubmit = (index: number) =>
  state(index) !== 'solid' && $props.type === 'expand';

type Button = Partial<OperationButton> & {
  event: ButtonType;
};

const defaultButton: Partial<Button> = {
  type: 'primary',
  size: 'small',
  plain: true,
  link: false,
  visiable: true,
};

// console.log('$props.buttons', $props.buttons);

const viewBtns: Button[] = [
  { ...defaultButton, ...$props.edit, event: 'edit' },
  { ...defaultButton, ...$props.addExpand, event: 'addExpand' },
  { ...defaultButton, ...$props.add, event: 'add' },
  { ...defaultButton, ...$props.copy, event: 'copy' },
  { ...defaultButton, ...$props.del, event: 'del' },
];

const editBtns: Button[] = [{ ...$props.save, event: 'save' }];
const solidBtns: Button[] = [];

const buttons = (index: number) => {
  const state = states.value[index];
  if (state === 'view') {
    return viewBtns.filter(
      (view) =>
        $props.buttons.findIndex((btn) => btn === view.event) > -1
    );
  } else if (state === 'edit') {
    return editBtns;
  } else if (state === 'solid') {
    return solidBtns;
  }
  return [];
};

const handleOpeartion = (event: ButtonType, data: EventData) => {
  if (event === 'edit') {
    easyTableContext?.edit(data);
  } else if (event === 'save') {
    easyTableContext?.save(data);
  } else if (event === 'add') {
    easyTableContext?.add(data);
  } else if (event === 'copy') {
    easyTableContext?.copy(data);
  } else if (event === 'del') {
    easyTableContext?.del(data);
  } else if (event === 'addExpand') {
    // if (!data.row.__id__) return;
    // const extraContext = easyTableContext?.getExtra(data.row.__id__);
    easyTableContext?.addExpand(data);
  }
};

const handleExpandSubmit = (data: EventData) => {
  if (data.row.__id__) {
    const extraContext = easyTableContext?.getExtra(data.row.__id__);
    easyTableContext?.expandSubmit(data, extraContext);
  }
};
const handleExpandCancel = (data: EventData) => {
  // console.log('🚀 ~ handleExpandCancel ~ data:', data);
  if (data.row.__id__) {
    const extraContext = easyTableContext?.getExtra(data.row.__id__);
    easyTableContext?.expandSubmit(data, extraContext);
    easyTableContext?.delExpandedKey(data.row.__id__);
  }
};
</script>

<style scoped></style>
